<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>订单详情页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!--标准mui.css-->
    <link rel="stylesheet" href="${base!}/assets/front/h5/css/mui.min.css" />
    <link rel="stylesheet" href="${base!}/assets/front/h5/css/hryc.css" />
    <link rel="stylesheet" href="${base!}/assets/front/newH5/css/index.css?v=${@date.getDateTime()}" />
    <!--App自定义的css-->
    <!--<link rel="stylesheet" type="text/css" href="../css/app.css"/>-->
    <style>
        .mui-table-view .mui-media-object {
            line-height: 42px;
            max-width: 145px;
            height: 100px;
        }
        .jiage-text{
            font-size: 18px;
            color: red;
            margin-right:10px ;
        }
        [v-cloak]{
            display: none !important;
        }
    </style>
</head>
<body>


<header class="mui-bar mui-bar-nav top-color">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: white;"></a>
    <h1 class="mui-title" style="color: white;">
        订单详情
    </h1>
</header>
<div id="vue">
    <!--#if(order.payStatus == 3){#-->
    <div style="margin:0 auto;margin-top: 60px;overflow: hidden;width: 76px;" >
        <img src="${base!}/assets/front/h5/img/ico_success.png">
    </div>
    <div style="margin:0 auto;width: 52px;" >
        <span>已支付</span>
    </div>
    <!--#}else{#-->
    <div style="margin:0 auto;margin-top: 60px;overflow: hidden;width: 76px;" >
        <img src="${base!}/assets/front/h5/img/ico_wait.png">
    </div>
    <div style="margin:0 auto;width: 52px;" >
        <!--#if(order.payStatus == 0 ||order.payStatus == 1 ||order.payStatus == 2){#-->
        <span>待支付</span>
        <!--#}#-->
        <!--#if(order.payStatus == 4){#-->
        <span>待退款</span>
        <!--#}#-->
        <!--#if(order.payStatus == 6){#-->
        <span>已退款</span>
        <!--#}#-->
    </div>
    <!--#}#-->


    <div class="mui-card" >
        <div class="mui-card-header">
            <div>订单编号：${orderId}</div>
        </div>
        <div class="mui-card-header">
            <div>实付款：<span style="color: red;">${payMoney}</span></div>
        </div>
        <!--#if(!isEmpty(order.expressName)){#-->
        <div class="mui-card-header" onclick="goWl()">
            <div>物流公司：${order.expressName!}<a style="margin-left: 5px;">查看物流</a></div>
        </div>
        <div class="mui-card-header">
            <div>物流单号：${order.expressNo!}</div>
        </div>
        <!--#}#-->
        <!--#if(!isEmpty(refunds)){#-->
        <div class="mui-card-header">
            <div>退款原因：${refunds.note!}</div>
        </div>
        <!--#}#-->
        <!--#if(!isEmpty(points)){#-->
        <div class="mui-card-header">
            <div>抵扣积分：${points!}</div>
        </div>
        <!--#}#-->
        <!--#if(!isEmpty(sales_coupon)){#-->
        <div class="mui-card-header">
            <div>使用的优惠券：${sales_coupon.name!}</div>
        </div>
        <!--#}#-->


        <!--#if(order.orderType == "3"){#-->
        <div class="mui-card-content">
            <ul class="mui-table-view">
                <li class="mui-table-view-cell mui-media" v-for="item in orderProductList" :key="item.id">
                    <a href="#">
                        <div class="mui-media-body" style="white-space:normal;">
                            <span>视频包月服务</span>
                            <p class='mui-ellipsis'style="margin-top: 35px;margin-left: 0px;">
                                <!--<span class="jiage-text">￥36.00</span>-->
                                <span>包月月数：${order.monthlyNum!}</span>
                            </p>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
        <!--#}else{#-->
        <div class="mui-card-content">
            <ul class="mui-table-view">
                <li class="mui-table-view-cell mui-media" v-for="item in orderProductList" :key="item.id">
                    <!--#if(order.orderType == "1"){#-->
                    <a :href="'${base!}/open/h5/product/productDetail.html?id='+item.goodsId">
                    <!--#}#-->
                    <!--#if(order.orderType == "2"){#-->
                    <a :href="'${base!}/open/h5/cms/videoBuyPage.html?id='+item.goodsId">
                    <!--#}#-->
                        <img class="mui-media-object mui-pull-left" :src="item.imgUrl" style="width: 100px;height: 100px;">
                        <div class="mui-media-body" style="white-space:normal;">
                            <span>{{item.goodsName}}</span>
                            <p class='mui-ellipsis'style="margin-top: 35px;margin-left: 0px;">
                                <!--<span class="jiage-text">￥36.00</span>-->
                                <span>数量：*{{item.buyNum}}</span>
                            </p>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
        <!--#}#-->
    </div>
</div>




<!--#if(order.payStatus == 0 ||order.payStatus == 1 ||order.payStatus == 2){#-->
<div style="margin: 30px 10px 10px 10px;">
    <button type="button" onclick="window.location.href='${base!}/open/h5/order/orderInfoPayCheckoutCounter.html?orderId=${orderId}'"
            class="mui-btn mui-btn-primary mui-btn-block">支付</button>
</div>
<!--#}#-->
<!--#if(order.payStatus == 3 && order.deliveryStatus==3 && order.getStatus==0){#-->
<div style="margin: 10px;">
    <button type="button" onclick="confirmReceipt()" class="mui-btn mui-btn-primary mui-btn-block">确认收货</button>
</div>
<!--#}#-->
<!--#if(order.payStatus == 3 && order.getStatus == 1 && order.feedStatus==0){#-->
<div style="margin: 10px;">
    <button type="button" onclick="goFeedback()" class="mui-btn mui-btn-primary mui-btn-block">立即评价</button>
</div>
<!--#}#-->
<!--#if(order.payStatus == 3 && order.orderType == '1'){#-->
<div style="margin: 10px;">
    <button type="button" onclick="window.location.href='${base!}/open/h5/refunds/orderRefunds.html?orderId=${orderId!}'" class="mui-btn mui-btn-primary mui-btn-block">申请售后</button>
</div>
<!--#}#-->

<div style="margin: 10px;" id="deleteOrder">
    <button type="button" onclick="delOrder()" style="background: red;border: red;" class="mui-btn mui-btn-primary mui-btn-block">删除订单</button>
</div>


<script type="text/javascript" src="${base!}/assets/front/h5/js/mui.js" ></script>
<script type="text/javascript" src="${base!}/assets/front/h5/js/vue.js" ></script>
<script type="text/javascript" src="${base!}/assets/front/h5/js/jquery-2.0.0.min.js" ></script>
<script type="text/javascript" src="${base!}/assets/decorate/pc/decoratecommon/js/layer/mobile/layer.js" ></script>
<script type="application/javascript">
    mui.init({
        swipeBack:true //启用右滑关闭功能
    });

    var vue = new Vue({
        el: '#vue',
        data: {
            orderProductList: [],
        },
        created:function () {   //实例初始化创建完成执行

            this.getOrderProductList();    //调用自身方法
            this.queryWeiXinOrderStatus(); //查询微信那边订单状态
            

        },
        methods:{              //定义封装方法
            //获得订单组商品列表
            getOrderProductList:function () {
                var self = this;
                $.ajax({
                    type:"POST",
                    url:"${base!}/open/h5/order/getOrderProductList.html",
                    dataType:"JSON",
                    data:{
                        orderId:'${orderId}'
                    },
                    success:function(data){
                        if (data.code == 0) {
                            var d = data.data;
                            self.orderProductList = d;
                        } else {

                            }
                        }
                    });
            },
            queryWeiXinOrderStatus:function () {
                var self = this;
                var payStatus = "${order.payStatus!}";
                if(payStatus == "0") {
                    $.ajax({
                        type: "POST",
                        url: "${base!}/open/h5/pay/queryWeiXinOrderStatus.html",
                        dataType: "JSON",
                        data: {
                            orderId: '${orderId}'
                        },
                        success: function (data) {
                            if (data.code == 0) {
                                window.location.reload();
                            } else {

                            }
                        }
                    });
                }
            }
        },
        watch:{     //监听器
            // carModel:function () {
            //     this.getProvince();
            // }
        }

    })
    function confirmReceipt() {
        $.ajax({
            type:"POST",
            url:"${base!}/open/h5/order/confirmReceipt.html",
            dataType:"JSON",
            data:{
                orderId:'${orderId}'
            },
            success:function(data){
                if (data.code == 0) {
                    window.location.reload();
                } else {

                }
            }
        });
    }
    function delOrder() {
        //询问框
        layer.open({
            content: '您确定删除当前订单'
            ,btn: ['是', '否']
            ,yes: function(index){
                $.ajax({
                    type:"POST",
                    url:"${base!}/open/h5/order/delOrder.html",
                    dataType:"JSON",
                    data:{
                        orderId:'${orderId}'
                    },
                    success:function(data){
                        if (data.code == 0) {
                            window.location.href="${base!}/open/h5/order/goOrderList.html?status=6";
                        } else {

                        }
                    }
                });
                layer.close(index);
            }
        });
    }

    //进入评价页
    function goFeedback() {
        window.location.href = "${base!}/open/h5/feedback/goFeedback?orderId=${orderId}";
    }
    


    $(function () {
        var payStatus = "${order.payStatus!}";
        var deliveryStatus = "${order.deliveryStatus!}";
        var orderStatus = "${order.orderStatus!}";
        var getStatus = "${order.getStatus!}";

        //代发货隐藏删除按钮
        if(payStatus == '3' && deliveryStatus == '0'){
           $("#deleteOrder").css("display","none");
        }

        var orderStatusInt = parseInt(orderStatus);
        //代收货隐藏删除按钮
        if(payStatus == '3' && deliveryStatus == '3' && getStatus=='0' && orderStatusInt<5){
            $("#deleteOrder").css("display","none");
        }
    })

    function goWl() {
        window.location.href="https://m.kuaidi100.com/app/query/?com=${order.expressId!}&nu=${order.expressNo!}&coname=HquaDahY3891";
    }

</script>
</body>
</html>
